import { useContext, useEffect, useState } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import ListItem from './ListItem';
import { InBizUploadCtx, InBizUploadListCtx } from '../../context';
import { TextWidget } from '@inbiz/react';
type IProps = {
  viewMode?: string;
}

const ListContent = (props: IProps) => {
  const {
    thumbnail,
    showListFloatLayer,
    showFolderPath = true,
    fixedHeight,
    collapsible = true,
  } = useContext(InBizUploadCtx);
  const { viewMode } = props;
  const { animationsDisabled, visibleFiles, isPackUp, onUnwindPackUp } =
    useContext(InBizUploadListCtx);
  const [showPackUp, $showPackUp] = useState(() => !isPackUp);
  useEffect(() => {
    // 显示按钮动画完成后再显示
    if (isPackUp) {
      $showPackUp(!isPackUp)
    } else {
      setTimeout(() => {
        $showPackUp(!isPackUp)
      }, 300)
    }
    
  }, [isPackUp])
  return visibleFiles.length > 0 ? (
    <div>
      {/* @ts-ignore */}
      {showListFloatLayer && showFolderPath && (
        <div className='react-fine-uploader-gallery-modal-content-header'>
          <span><TextWidget>inbizUpload.fileInfo</TextWidget></span>
          <span><TextWidget>inbizUpload.uploadTo</TextWidget></span>
        </div>
      )}
      <TransitionGroup
        component="ul"
        style={
          fixedHeight || showListFloatLayer
            ? thumbnail
              ? { maxHeight: '306px', overflowY: 'auto', marginTop: viewMode == 'look' ? '-8px' : '' }
              : { maxHeight: '334px', overflowY: 'auto' }
            : viewMode == 'look' && thumbnail ? { marginTop: '0' } : {}

        }
        className={
          fixedHeight || showListFloatLayer
            ? 'react-fine-uploader-gallery-files-fixed'
            : 'react-fine-uploader-gallery-files'
        }
        enter={!animationsDisabled}
        exit={!animationsDisabled}
      >
        {visibleFiles.map((item: any) => (
          // @ts-ignore
          <CSSTransition
            key={item.id}
            classNames="react-fine-uploader-gallery-files"
            timeout={{ enter: 500, exit: 300 }}
          >
            <ListItem {...item} viewMode={viewMode} />
          </CSSTransition>
        ))}
        {showListFloatLayer && visibleFiles?.length >= 5 && (
          // @ts-ignore
          <CSSTransition timeout={{ enter: 500, exit: 300 }}>
            <li className="react-fine-uploader-gallery-modal-li">
              <div className="react-fine-uploader-gallery-modal-no-content">
                <TextWidget>inbizUpload.noContent</TextWidget>
              </div>
            </li>
          </CSSTransition>
        )}
      </TransitionGroup>
      {showListFloatLayer && showPackUp && collapsible && (
        <div className="react-fine-uploader-gallery-modal-btn" onClick={() => onUnwindPackUp()}>
          <TextWidget>inbizUpload.packUp</TextWidget>
        </div>
      )}
    </div>
  ) : null;
};

export default ListContent;
